<template>
  <div class="mai">
    <!-- 导航部分 -->
    <div class="header">
      <nav class="nav">
            <div class="nav-title">
                <div class="nav-title-left" v-if="username===''">
                  <a href="javascript:;" @click="loginbox">登录</a>
                  <router-link to="/register">注册</router-link>
                </div>
                <div class="nav-title-left1" v-else>
                    <a href="javascript:;">{{username}}</a>
                    <a href="javascript:;" @click="loginOut">退出</a>
                </div>
                <div class="nav-title-right">
                    <span>洛阳</span>
                    <a  v-if="is_admin"
                    href="http://localhost:63342/home-admin/index.html">控制台</a>
                </div>
            </div>
          </nav>
    </div>
    <!-- login 遮罩层 -->
    <div class="login_box" v-show="isShow">
        <div class="login_info_box">
            <div class="login_info_con">
              <!-- 标题部分 -->
                <p style="text-align: right; background-color: #da4453;">
                  <!-- 登录标题 -->
                  <span style="margin-right: 120px;color: #fff; font-size: 16px;">账号登录</span>
                 <!-- 关闭按钮 -->
                  <span @click="close" style="display:inline-block;text-align:center;color: #fff;width:30px;height:35px;line-height:35px; font-size: 16px;cursor: pointer;" class="iconfont icon-guanbi"></span>
                </p>
                <!-- 登录主题部分 -->
                <div class="login_info_body">
                    <div class="info_tab clearfix">
                        <div class="tab_item" @click="cur1()" :class="{cur:CurActive==1}">
                            志愿者登录
                        </div>
                        <div class="tab_item" @click="cur2()" :class="{cur:CurActive==2}">
                          组织/团体登录
                        </div>
                    </div>
                    <!-- 志愿者登录 -->
                    <form class="volunteer_login" v-show="isvolun">
                      <input type="hidden" name="loginType" value="1">
                      <div class="info_body">
                          <div class="info_input_common">
                              <input type="text" class="right_input" placeholder="请输入手机或邮箱" name="username" v-model="username1">
                          </div>
                           <div class="info_input_common">
                              <input type="password" class="password_input" name="password" placeholder="请输入密码" v-model="password1">
                          </div>
                          <div class="info_input_common pp">
                              <div class="vecl">
                                <input type="text" class="password_input qq position" v-model="position1" name="position" placeholder="请输入验证码">
                              </div>
                              <img id="did1" title="看不清？点击试一试" src="http://nwk.free.idcfengye.com/vcodes/12321312" alt="未显示" @click="generateImageCode">
                          </div>
                           <div class="info_input_common pp">
                             <div class="forover_password">
                               <label for="check">
                                  <input type="checkbox" name="ischeck" v-model="ischeck" id="check"/><span>记住密码</span>
                               </label>
                             </div>
                            <div class="no_password">  
                              <a href="javascript:;">忘记密码</a>
                            </div>
                          </div>
                           <div class="info_input_common logoIn">
                             <div class="logo" @click="tologin">
                                登录
                             </div>
                          </div>
                            <div class="info_input_common logoIn bottom">
                              <span>还不是志愿者？</span>
                              <router-link to="/register">加入我们</router-link>
                          </div>
                      </div>
                    </form>
                       <!-- 组织登录登录 -->
                    <form class="volunteer_login" v-show="!isvolun">
                      <input type="hidden" name="loginType" value="2"> 
                      <div class="info_body">
                          <div class="info_input_common">
                              <input type="text" class="right_input" placeholder="请输入账号">
                          </div>
                           <div class="info_input_common">
                              <input type="password" class="password_input" placeholder="请输入密码">
                          </div>
                          <div class="info_input_common pp">
                              <div class="vecl">
                                <input type="password" class="password_input qq" placeholder="请输入密码">
                              </div>
                              <img title="看不清？点击试一试" src="../assets/staticimge4login.jpg" alt="未显示">
                          </div>
                           <div class="info_input_common pp">
                             <div class="forover_password">
                               <label for="check">
                                  <input type="checkbox" name="" id="check"/><span>记住密码</span>
                               </label>
                             </div>
                            <div class="no_password">  
                              <a href="javascript:;">忘记密码</a>
                            </div>
                          </div>
                           <div class="info_input_common logoIn">
                             <div class="logo">
                                登录
                             </div>
                          </div>
                            <div class="info_input_common logoIn bottom">
                              <span>还不是组织？</span>
                              <router-link to="/register">加入我们</router-link>
                          </div>
                      </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
   <div class="main">
 <!-- 头部logo -->
    <div class="header-logo"> 
      <img src="@/assets/menu-banner.jpg" alt="">
    </div>
<!-- 中部导航部分 -->
    <nav class="middle-nav">
      <div class="middle-nav-title">
          <ul>
            <li><router-link to="/Home">首页</router-link></li>
            <li><router-link to="/organization">组织团体</router-link></li>
            <li><router-link to="/active">志愿活动</router-link></li>
            <li><router-link to="/certificate">志愿者证</router-link></li>
            <li><router-link to="/certificate1">实践证书</router-link></li>
            <li><router-link to="/download">下载中心</router-link></li>
            <li><router-link to="/help">帮助中心</router-link></li>
          </ul>
      </div>
    </nav>
<!-- 路由切换部分 -->
  <router-view></router-view>
   </div> 
<!-- 底部footer部分 -->
     <div class="footer">
          <p>洛阳师范学院所有 2021月5月8日</p>
     </div>
  </div>
</template>

<script>
// @ is an alias to /src
import apiData from "../assets/apiData";
import keys from "../assets/keys";
import {mapMutations,mapState,mapGetters} from 'vuex'
export default {
  name: 'Main',
  data() {
    return {
      is_admin:false,
      username:'',
      isShow:false,
      CurActive:1,
      isvolun:true,
      ischeck:'',
      username1:'',
      password1:'',
      position1:''

    }
  },
   created() {
     if(sessionStorage.getItem("storageUser")){
       console.log(sessionStorage.getItem("storageUser"))
      let  session = JSON.parse(sessionStorage.getItem("storageUser")) ;
      console.log(session[0]);  
      if(session[0].authority==="志愿者"){
            this.is_admin  = false;

          }else{
             this.is_admin  =true;
      }

      this.username = session[1].authority
      //  this.$store.commit('storageUser',JSON.parse(sessionStorage.getItem("storageUser")));
     
     }
  },
  computed:{
    ...mapMutations['storageUser','updateUser','storageiphone'],
    ...mapState(['user','iphone']),
    ...mapGetters['getUser']
  },
  methods: {
    // 打开登录按钮
    loginbox(){
      this.isShow = !this.isShow;
    },
    // 关闭登录按钮
    close(){
      this.isShow = !this.isShow;
    },
    // 切换登录方式
    cur1(){
      this.CurActive =1,
      this.isvolun = true
    },
    cur2(){
      this.CurActive =2,
        this.isvolun = false
    },
    tologin(){
      let data1 = {
        loginacct:"user"+this.username1,
        userpswd:this.password1,
      }
      apiData.login.getReslut(data1).then(res=>{
        // console.log(res.data.username);
         if(res.data.authorities !==null){
           this.username = res.data.authorities[1].authority;
           console.log(res.data.authorities[0].authority);
          if(res.data.authorities[0].authority==="志愿者"){
            this.is_admin  = false;

          }else{
             this.is_admin  =true;
          }
          //如果res.data !== null 说明用户登录成功了,应该将登录框
          //隐藏，将信息存到vuex中,改变导航栏样式
        
          this.$store.commit('storageUser',res.data.authorities);
          this.$store.commit('storageiphone',res.data.username);
          //将res对象传到session中
          // console.log(res.data[0].username);
          sessionStorage.setItem("getiphone",JSON.stringify(res.data.username))
          sessionStorage.setItem("storageUser",JSON.stringify(res.data.authorities))
          //关闭登录框
          this.isShow =false;
          // console.log(this.$store.getters.getUser[0]);
          // console.log(res);
        }
      }).catch(err=>{
        console.log(err);
      });
    },
    /**
     * 验证码更新
     */
    generateImageCode(){
      // 1.设置图片url地址

     let  image_url =   keys.keys.base+'/vcodes/'+Math.random()

      // 2.将地址设置到img标签的src属性中,为image_url
      document.getElementById('did1').src = image_url

    },
  //  安全退出
    loginOut(){
      sessionStorage.clear();
      location.reload();
    }
  },
  components: {
    
  }
}
</script>

<style scoped> 
.router-link-active{
 background-color: #FE8B02;
  border-radius: 30px;
}
/* login-box遮罩层 */
.login_box {
    /* display: none; */
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 111;
    background-color: rgba(27, 26, 26, 0.5);
}
.login_box .login_info_box {
    margin-top: 60px;
    background-color: #fff;
    width: 362px;
    margin: 100px auto;
    z-index: 112;
}
.login_box .login_info_box .login_info_con {
    width: 362px;
}
.login_box .login_info_box .login_info_body {
    background-color: #f3f4f6;
    border: 1px solid #e7e7e7;
}
.info_tab{
  display: flex;
  /* background-color: pink; */
  width: 360px;
  height: 50px;
}
.login_box .login_info_box .login_info_body .tab_item {
    width: 50%;
    height: 50px;
    line-height: 50px;
    background-color: #e4e4e4;
    float: left;
    color: #999;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}
.login_box .login_info_box .login_info_body .tab_item.cur {
    background-color: transparent;
    color: #666;
}
.login_box .login_info_box .info_body {
    padding: 36px 20px 15px;
}
.login_box .login_info_box .info_input_common {
    margin-bottom: 15px;
}
.login_box .login_info_box .info_input_common .right_input {
    width: 276px;
    height: 38px;
    line-height: 38px;
    font-size: 14px;
    padding-left: 32px;
    padding-right: 10px;
    background-image:url(../assets/login_icon.png);
    background-repeat: no-repeat;
    border: 1px solid #e7e7e7;
    background-color: #fff;
}
.password_input{
    width: 276px;
    height: 38px;
    line-height: 38px;
    font-size: 14px;
    padding-left: 32px;
    padding-right: 10px;
    background-image: url(../assets/login_icon.png);
    background-position: 0 -40px;
    background-repeat: no-repeat;
    border: 1px solid #e7e7e7;
    background-color: #fff;
}
.vecl{
  width: 50%;
}
.pp{
  display: flex;
  justify-content: space-between;
}
.position{
      background-position: 0 -75px;
}
.pp>img{
  cursor: pointer;
  height: 38px;
}
.vecl>input{
  width: 100%;
}
.forover_password span{
  margin-left: 5px;
  font-size: 14px;
}
.no_password>a{
  font-size: 14px;
  color: hsl(214, 74%, 49%);
}
.info_input_common>.logo{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #da4453;
  cursor: pointer;
  color: #fff;
}
.logoIn{
  height: 38px;
}
.bottom{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eee;
}
.bottom>span{
  font-size: 14px;
  margin-right: 14px;
}
.bottom>a{
  font-size: 14px;
  color:  hsl(214, 74%, 49%);
}
.mai{
  height: auto;
}
.header{
   margin: 0 auto;
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0;
  background: #464C5B;
}
.main{
 width: 100%;
  position: absolute;
  top: 60px;
  bottom: 90px;
  overflow: auto;
  padding-top: 10px;

}
.footer{
   width: 100%;
  margin: 0 auto;
  position: fixed;
  bottom: 0;
  height:60px;
  text-align: center;
  line-height: 60px;
  color: #eee;
  font-size: 14px;
  background: #464C5B;
}
.nav{
  width: 100% ;
  height: 60px;
  background-color: #000;

}
.nav-title{
  display: flex;
  justify-content: space-between;
  width: 1260px;
  height: 60px;
  /* background-color: pink; */
  margin: 0 auto;

}
.nav-title-left{
  width: 200px;
  height: 60px;
  /* background-color:aqua; */
  text-align: center;
  line-height: 60px;
}

.nav-title-left a{
  display: inline-block;
  width: 30px;
  margin-right: 10px;
  font-size: 14px;
}
.nav-title-left a:hover{
  color: #DB4453;
}
.nav-title-left1{
    margin-left: 40px;
    display: flex;
    width: 100px;
    height: 60px;
    /* background-color:aqua; */
    justify-content: space-around;
    text-align: center;
    line-height: 60px;
    font-size: 14px;

}
.nav-title-right{
  display: flex;
  justify-content: space-evenly;
  width: 200px;
  height: 60px;
  /* background-color:aqua; */
  text-align: center;
  line-height: 60px;
}
.nav-title-right span{
  display: inline-block;
  color: #fff;
  width: 100px;
  /* margin-right: 2px; */
  font-size: 14px;
}
.nav-title-right a{
    display: inline-block;
    color: #fff;
    width: 100px;
    /* margin-right: 2px; */
    font-size: 14px;
    cursor: pointer;
}
.nav-title-right a:hover{
    color: #DB4552;
}
.header-logo{
  margin: 0 auto;
  width: 1247px;
  height: 142px;
  border-radius: 10px;
}
.middle-nav{
  width: 100%;
  height: 60px;
  background-color: #DB4453;
}
.middle-nav-title{
  width:1247px;
  margin: 10px auto;
  height: 60px;
  /* background-color: pink; */
}
.middle-nav-title ul li{
  float: left;
  width: 170px;
  height: 40px;
   margin: 10px auto;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}
.middle-nav-title ul li a{
  display: inline-block;
  width: 170px;
  height: 40px;
}
.middle-nav-title ul li:hover{
  background-color: #FE8B02;
  border-radius: 30px;
}
/* .footer{
  width: 100%;
  background-color: #eee;
  height: 200px;
} */
</style>